<template>
    <div class="box"></div>
</template>
<script setup lang="ts">
import * as Vue from 'vue'
// import '../cssHoudini'
// const { getCurrentInstance, nextTick } = Vue
// const { proxy } = getCurrentInstance()

// console.log(CSS.paintWorklet)
// CSS.registerProperty({
//     name: '--image',
//     syntax: '<image>',
//     initialValue: 'black',
//     inherits: false
// });
// CSS.paintWorklet.addModule('../cssHoudini.js');

// CSS.registerProperty({
//     name: '--circle-color',
//     syntax: '<color>',
//     initialValue: 'black',
//     inherits: false
// });
// if ("paintWorklet" in CSS) {
//   console.log(88888)
//   CSS.paintWorklet.addModule('../cssHoudini');
// }
// CSS.paintWorklet.addModule('../cssHoudini');
if (window.CSS) {
    CSS.registerProperty({
        name: '--start-stop',
        syntax: '<color>',
        inherits: false,
        initialValue: 'transparent'
    });
    CSS.registerProperty({
        name: '--end-stop',
        syntax: '<color>',
        inherits: false,
        initialValue: 'transparent'
    });
    }
</script>
<style lang="less" scoped>
.box {
    max-width: 400px; height: 200px;
    --start-stop: olive;
    --end-stop: yellowgreen;
    background: linear-gradient(to right, var(--start-stop), var(--end-stop));
    transition: --start-stop .5s, --end-stop .5s;
}
.box:hover {
    --start-stop: green;
    --end-stop: purple;
}
</style>